<template>
  <div class="top-bar">
    <div class="left"></div>
    <div class="right">
      <div class="top-icon close" title="关闭" @click="btnClick('close')">
        <i class="el-icon-close"></i>
      </div>
      <div class="top-icon max" title="最大化" @click="btnClick('max')">
        <i v-if="!isFull" class="el-icon-full-screen"></i>
        <i v-if="isFull" class="el-icon-copy-document"></i>
      </div>
      <div class="top-icon min" title="最小化" @click="btnClick('min')">
        <i class="el-icon-minus"></i>
      </div>
      <div class="top-icon top" :class="isAlwaysOnTop ? 'always-top' : ''" title="置顶" @click="btnClick('top')">
        <i class="el-icon-paperclip"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFull: false,
      isAlwaysOnTop: false
    }
  },
  methods: {
    btnClick: function(key) {
      let vm = this
      switch (key) {
        case 'close':
          break
        case 'max':
          if (vm.isFull) {
            vm.$remote.getCurrentWindow().unmaximize()
            vm.isFull = false
          } else {
            vm.$remote.getCurrentWindow().maximize()
            vm.isFull = true
          }
          break
        case 'min':
          vm.$remote.getCurrentWindow().minimize()
          break
        case 'top':
          vm.$remote.getCurrentWindow().setAlwaysOnTop(!vm.isAlwaysOnTop)
          vm.isAlwaysOnTop = !vm.isAlwaysOnTop
          break
      }
    }
  }
}
</script>

<style scoped>
.top-bar {
  position: absolute;
  top: 0;
  left: 60px;
  right: 0;
  height: 26px;
  -webkit-app-region: drag;
  -webkit-user-select: none;
}

.top-bar .left {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 250px;
  background-color: #c3d7df;
}

.top-bar .right {
  position: absolute;
  top: 0;
  left: 250px;
  height: 100%;
  right: 0;
  background-color: rgba(198, 223, 200, 0.5);
}

.top-icon {
  position: absolute;
  -webkit-app-region: no-drag;
  top: 0;
  height: 26px;
  width: 30px;
  line-height: 26px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  color: #909399;
}

.top-icon:hover {
  background-color: #f2f6fc;
}

.close {
  right: 0;
}

.close:hover {
  background-color: #f56c6c;
  color: #ffffff;
}

.max {
  right: 30px;
}

.min {
  right: 60px;
}

.top {
  right: 90px;
}

.always-top {
  color: #000000;
}
</style>
